﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Areas/Wijmo/Views/Shared/ViewMasterPage1.Master"
    Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Menu
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div class="main demo">
        <!-- Begin demo markup -->
        <ul id="menu1">
            <li><a href="#">Breaking News</a>
                <ul>
                    <li><a href="#">Entertainment</a></li>
                    <li></li>
                    <li><a href="http://www.w3schools.com/tags/html5.asp">Politics</a></li>
                    <li><a href="#">A&amp;E</a></li>
                    <li><a href="#">Sports</a> </li>
                    <li><a href="#">Local</a></li>
                    <li><a href="#">Health</a></li>
                </ul>
            </li>
            <li><a href="#">Entertainment</a>
                <ul>
                    <li><a href="#">Celebrity news</a></li>
                    <li><a href="#">Gossip</a></li>
                    <li><a href="#">Movies</a></li>
                    <li><a href="#">Music</a>
                        <ul>
                            <li><a href="#">Alternative</a></li>
                            <li><a href="#">Country</a></li>
                            <li><a href="#">Dance</a></li>
                            <li><a href="#">Electronica</a></li>
                            <li><a href="#">Metal</a></li>
                            <li><a href="#">Pop</a></li>
                            <li><a href="#">Rock</a>
                                <ul>
                                    <li><a href="#">Bands</a>
                                        <ul>
                                            <li><a href="#">Dokken</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">Fan Clubs</a></li>
                                    <li><a href="#">Songs</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">Slide shows</a></li>
                    <li><a href="#">Red carpet</a></li>
                </ul>
            </li>
            <li><a href="#">Finance</a>
                <ul>
                    <li><a href="#">Personal</a>
                        <ul>
                            <li><a href="#">Loans</a></li>
                            <li><a href="#">Savings</a></li>
                            <li><a href="#">Mortgage</a></li>
                            <li><a href="#">Debt</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Business</a></li>
                </ul>
            </li>
            <li><a href="#">Food &#38; Cooking</a>
                <ul>
                    <li><a href="#">Breakfast</a></li>
                    <li><a href="#">Lunch</a></li>
                    <li><a href="#">Dinner</a></li>
                    <li><a href="#">Dessert</a>
                        <ul>
                            <li><a href="#">Dump Cake</a></li>
                            <li><a href="#">Doritos</a></li>
                            <li><a href="#">Both please.</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Lifestyle</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Politics</a></li>
            <li><a href="#">Sports</a></li>
        </ul>
        <ul id="menu2">
            <li><a href="#">Breaking News</a>
                <ul>
                    <li><a href="#">Entertainment</a></li>
                    <li><a href="http://www.w3schools.com/tags/html5.asp">Politics</a></li>
                    <li><a href="#">A&amp;E</a></li>
                    <li><a href="#">Sports</a> </li>
                    <li><a href="#">Local</a></li>
                    <li><a href="#">Health</a></li>
                </ul>
            </li>
            <li><a href="#">Entertainment</a>
                <ul>
                    <li><a href="#">Celebrity news</a></li>
                    <li><a href="#">Gossip</a></li>
                    <li><a href="#">Movies</a></li>
                    <li><a href="#">Music</a>
                        <ul>
                            <li><a href="#">Alternative</a></li>
                            <li><a href="#">Country</a></li>
                            <li><a href="#">Dance</a></li>
                            <li><a href="#">Electronica</a></li>
                            <li><a href="#">Metal</a></li>
                            <li><a href="#">Pop</a></li>
                            <li><a href="#">Rock</a>
                                <ul>
                                    <li><a href="#">Bands</a>
                                        <ul>
                                            <li><a href="#">Dokken</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">Fan Clubs</a></li>
                                    <li><a href="#">Songs</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">Slide shows</a></li>
                    <li><a href="#">Red carpet</a></li>
                </ul>
            </li>
            <li><a href="#">Finance</a>
                <ul>
                    <li><a href="#">Personal</a>
                        <ul>
                            <li><a href="#">Loans</a></li>
                            <li><a href="#">Savings</a></li>
                            <li><a href="#">Mortgage</a></li>
                            <li><a href="#">Debt</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Business</a></li>
                </ul>
            </li>
            <li><a href="#">Food &#38; Cooking</a>
                <ul>
                    <li><a href="#">Breakfast</a></li>
                    <li><a href="#">Lunch</a></li>
                    <li><a href="#">Dinner</a></li>
                    <li><a href="#">Dessert</a>
                        <ul>
                            <li><a href="#">Dump Cake</a></li>
                            <li><a href="#">Doritos</a></li>
                            <li><a href="#">Both please.</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Lifestyle</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Politics</a></li>
            <li><a href="#">Sports</a></li>
        </ul>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#menu1").wijmenu();
                $("#menu2").wijmenu({
                    orientation: 'vertical'
                });
            });
        </script>
        <hr />
        <ul id="menu3">
            <li><a><span class="ui-icon ui-icon-arrowthick-1-w ui-wijmenu-icon-left"></span><span>
                Menu1</span></a></li>
            <li><a><span class="ui-icon ui-icon-arrowrefresh-1-s ui-wijmenu-icon-left"></span><span
                style="cursor: pointer;">Menu2</span></a>
                <ul>
                    <li><a>submenu1</a></li>
                    <li><a>submenu2</a>
                        <ul>
                            <li><a>submenu21</a></li>
                            <li><a>submenu22</a></li>
                            <li><a>submenu23</a></li>
                            <li><a>submenu24</a></li>
                            <li><a>submenu25</a></li>
                        </ul>
                    </li>
                    <li><a>submenu3</a></li>
                    <li><a>submenu4</a>
                        <ul>
                            <li><a>submenu41</a></li>
                            <li><a>submenu42</a></li>
                            <li><a>submenu43</a></li>
                            <li><a>submenu44</a></li>
                            <li><a>submenu45</a></li>
                            <li><a>submenu46</a></li>
                            <li><a>submenu47</a></li>
                            <li><a>submenu48</a></li>
                        </ul>
                    </li>
                    <li><a>submenu5</a></li>
                    <li><a>submenu6</a></li>
                    <li><a>submenu7</a></li>
                    <li><a>submenu8</a></li>
                </ul>
            </li>
            <li><a><span class="ui-icon ui-icon-comment ui-wijmenu-icon-left"></span><span>Menu3</span></a></li>
            <li><a><span class="ui-icon ui-icon-person ui-wijmenu-icon-left"></span><span>Menu4</span></a></li>
            <li><a><span class="ui-icon ui-icon-trash ui-wijmenu-icon-left"></span><span>Menu5</span></a></li>
            <li><a><span class="ui-icon ui-icon-bookmark ui-wijmenu-icon-left"></span><span>Menu6</span></a>
                <ul>
                    <li><a>submenu61</a></li>
                    <li><a>submenu62</a></li>
                    <li><a>submenu63</a></li>
                    <li><a>submenu64</a></li>
                    <li><a>submenu65</a></li>
                    <li><a>submenu66</a></li>
                    <li><a>submenu67</a></li>
                    <li><a>submenu68</a></li>
                    <li><a>submenu69</a></li>
                </ul>
            </li>
            <li><a><span class="ui-icon ui-icon-clock ui-wijmenu-icon-left"></span><span>Menu7</span></a></li>
            <li><a><span class="ui-icon ui-icon-minusthick ui-wijmenu-icon-left"></span><span>Menu8</span></a></li>
        </ul>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#menu3").wijmenu({
                    orientation: "horizontal"
                });
            });
        </script>
        <hr />
        <ul id="wijmenu1">
            <li><a href="#">File</a>
                <ul>
                    <li>
                        <div>
                            <a href="#">New</a><span class="ui-wijmenu-icon-right">Ctrl+N</span>
                        </div>
                    </li>
                    <li>
                        <div>
                            <a href="#">Open</a><span class="ui-wijmenu-icon-right">Ctrl+O</span>
                        </div>
                    </li>
                    <li>
                        <div>
                            <a href="#">Save</a><span class="ui-wijmenu-icon-right">Ctrl+S</span>
                        </div>
                    </li>
                </ul>
            </li>
            <li><a href="#">Edit</a>
                <ul>
                    <li>
                        <div>
                            <a href="#">Undo</a><span class="ui-wijmenu-icon-right">Ctrl+Z</span>
                        </div>
                    </li>
                    <li></li>
                    <li>
                        <div>
                            <a href="#">Cut</a><span class="ui-wijmenu-icon-right">Ctrl+X</span>
                        </div>
                    </li>
                    <li>
                        <div>
                            <a href="#">Copy</a><span class="ui-wijmenu-icon-right">Ctrl+C</span>
                        </div>
                    </li>
                    <li>
                        <div>
                            <a href="#">Paste</a><span class="ui-wijmenu-icon-right">Ctrl+V</span>
                        </div>
                    </li>
                </ul>
            </li>
            <li><a href="#">View</a>
                <ul>
                    <li><span>
                        <input id="checkbox1" type="checkbox" /><label for="checkbox1">Status Bar</label>
                    </span></li>
                    <li><span>
                        <input id="checkbox2" type="checkbox" /><label for="checkbox2">Side Bar</label>
                    </span></li>
                    <li><span>
                        <input type="text" />
                    </span></li>
                    <li></li>
                    <li><a href="#">Character Encoding</a>
                        <ul>
                            <li><span>
                                <input type="radio" name="radiobutton1" id="radio1" /><label for="radio1">Western (ISO-8859-1)</label>
                            </span></li>
                            <li><span>
                                <input type="radio" name="radiobutton1" id="radio2" /><label for="radio2">Unicode (UTF-8)</label>
                            </span></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#wijmenu1").wijmenu();

                $(":input").wijradiobuttondecorator().wijcheckboxdecorator();
            });
        </script>
        <ul id="menu4" style="background-image: none; background: none;">
            <li><a href="#">Breaking News</a>
                <ul>
                    <li><a href="#">Entertainment</a></li>
                    <li></li>
                    <li><a href="http://www.w3schools.com/tags/html5.asp">Politics</a></li>
                    <li><a href="#">A&amp;E</a></li>
                    <li><a href="#">Sports</a> </li>
                    <li><a href="#">Local</a></li>
                    <li><a href="#">Health</a></li>
                </ul>
            </li>
        </ul>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#menu4").wijmenu({
                    orientation: "horizontal"
                });
            });
        </script>
        <hr />
        <div class="container">
            <ul id="menu">
                <li><a href="#">What's new?</a>
                    <ul class="active">
                        <li><a href="#">Weekly specials</a></li>
                        <li><a href="#">Last night's pics!</a></li>
                        <li><a href="#">Users' comments</a></li>
                    </ul>
                </li>
                <li><a href="#">Member extras</a>
                    <ul>
                        <li><a href="#">Premium Celebrities</a></li>
                        <li><a href="#">24-hour Surveillance</a></li>
                </li>
            </ul>
        </div>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#menu li ul').css({
                    display: "none",
                    left: "auto"
                });
                $('#menu li').hover(function () {
                    $(this)
.find('ul')
.stop(true, true)
.slideDown('fast');
                }, function () {
                    $(this)
.find('ul')
.stop(true, true)
.fadeOut('fast');
                });
            });
        </script>
    </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolderCss" runat="server">
    <link href="<%=Html.AreaCssPath("Wijmo") %>base-reset.css" rel="stylesheet" type="text/css" />
    <link href="<%=Html.AreaCssPath("Wijmo") %>themes/Wijmo/jquery.ui.wijsuperpanel.css"
        rel="stylesheet" type="text/css" />
    <link href="<%=Html.AreaCssPath("Wijmo") %>themes/Wijmo/jquery.ui.wijmenu.css" rel="stylesheet"
        type="text/css" />
    <link href="<%=Html.AreaCssPath("Wijmo") %>themes/Wijmo/jquery.ui.wijradiobuttondecorator.css"
        rel="stylesheet" type="text/css" />
    <link href="<%=Html.AreaCssPath("Wijmo") %>themes/Wijmo/jquery.ui.wijcheckboxdecorator.css"
        rel="stylesheet" type="text/css" />
    <style type="text/css">
        #container
        {
            position: relative;
        }
        #menu
        {
            position: absolute;            
        }
        #menu, #menu ul
        {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        #menu li
        {
            float: left;
            background: #FFF;
        }
        #menu a
        {
            display: block;
            padding: 5px;
            width: 130px;
        }
        #menu li ul
        {
            position: absolute;
            left: -999em;
            width: 140px;
        }
        #menu li:hover ul, #menu li ul:hover
        {
            left: auto;
        }
    </style>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolderScript" runat="server">
    <script src="<%=Html.AreaScriptPath("Wijmo") %>jquery.mousewheel.min.js" type="text/javascript"></script>
    <script src="<%=Html.AreaScriptPath("Wijmo") %>jquery.bgiframe-2.1.3-pre.js" type="text/javascript"></script>
    <script src="<%=Html.AreaScriptPath("Wijmo") %>Wijmo/jquery.ui.wijutil.js" type="text/javascript"></script>
    <script src="<%=Html.AreaScriptPath("Wijmo") %>Wijmo/jquery.ui.wijsuperpanel.js"
        type="text/javascript"></script>
    <script src="<%=Html.AreaScriptPath("Wijmo") %>Wijmo/jquery.ui.wijmenu.js" type="text/javascript"></script>
    <script src="<%=Html.AreaScriptPath("Wijmo") %>Wijmo/jquery.ui.wijradiobuttondecorator.js"
        type="text/javascript"></script>
    <script src="<%=Html.AreaScriptPath("Wijmo") %>Wijmo/jquery.ui.wijcheckboxdecorator.js"
        type="text/javascript"></script>
</asp:Content>
